$.elycharts.templates['dark_gray'] = {
    type: "line",
    margins: [10, 15, 25, 15],
    style: {
        "background-color": "#444"
    },
    defaultSeries: {
        anchor: {
            // add this class to dom elements when the mouse is hover the chart
            addClass: "selected",
            // highlight the chart when the mouse is on the table
            highlight: true,
            // use mouseenter instead of mousehover.
            useMouseEnter: true
        },
        plotProps: {
            "stroke-width": 5
        },
        dot: true,
        // rounded: false,
        dotProps: {
            stroke: "#444",
            size: 1,
            "stroke-width": 2
        },
        startAnimation: { // use an animation to start plotting the chart
            active: true,
            type: "avg",
            // start from the average line.
            speed: 1000,
            // animate in 1 second.
            easing: ">"
        },
        stepAnimation: { // defines an animation for data updates
            speed: 2000,
            delay: 0,
            easing: '<>'
        },
        highlight: {
            scaleSpeed: 200,
            scaleEasing: '>',
            scale: 7 // enlarge the dot on hover
        }
    },
    series: {
        serie1: {
            color: "#49f45d",
            dotProps: {
                fill: "#F6A"
            }
        }
    },
    defaultAxis: {
        labels: true,
        labelsProps: {
            fill: "#49f45d",
            "font-size": "10px"
        },
        labelsAnchor: "start",
        labelsMargin: 5,
        labelsDistance: 8,
        labelsHideCovered: true
    },
    axis: {
        l: { // left axis
            labels: false
        }
    },
    features: {
        mousearea: {
            type: 'axis'
        },
        grid: {
            draw: false,
            // draw both x and y grids
            forceBorder: [true, true, true, true],
            // force grid for external border
            ny: 7,
            // use 10 divisions for y grid
            nx: "auto",
            // 10 divisions for x grid
            props: {
                stroke: "#888" // color for the grid
            },
            oddHProps: {
                fill: "#CCC",
                opacity: .1,
                "stroke-width": 0
            },
            ticks: {
                active: [true, false, false],
                size: [10, 0],
                props: {
                    stroke: '#888'
                }
            }
        }
    }
}